<template>
	<view class="model">
		<view class="model_left_box">
			<view class="model_left">
				<view class="left_list flexs" :class="current==0?'model_border':''"
					@click="gocationList('second','',0)">
					<view class="left_color"></view>全部
				</view>
				<view class="left_list flexs" :class="current==index+1?'model_border':''"
					v-for="(item,index) in Incation" :key="index" @click="gocationList(2,item.id,index+1)">
					<view class="left_color"></view>{{item.name}}
				</view>

			</view>
			<view class="model_right">
				<view class="right_box">
					<view class="flexs2" v-for="(item,index) in IncationsecondList" :key="index"
						@click="secondprelist(index)">
						<view class="right_list">{{item.name}}</view>
						<view class="right_chexs">
							<image :style="itemlist.indexOf(index) != -1 ?'display:block':'display:none'"
								src="../static/img/ok@.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="flexs1">
			<view class="bottom_bs flexs" @click="reset()">重置</view>
			<view class="bottom_ps flexs" @click="quiet()">确定</view>
		</view>
	</view>

</template>

<script>
	import {
		Incation
	} from '../api/data.js'
	export default {
		props:{
			checkedArrey:{
				typeof:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				//行业一级分类
				Incation: [],
				//行业二级分类
				IncationsecondList: [],
				//分类切换
				current: 0,
				checkList:[],
				itemlist:this.checkedArrey
			}
		},
		mounted() {
			this.IncationList(1)
			// 页面显示是默认选中第一个
			this.gocationList('second', '', 0)
		},
		methods: {
			//获取行业一级分类
			IncationList(type, pid) {
				console.log("dsfewf")
				Incation(type, pid).then((res) => {
					this.Incation = res.data
					console.log(res)
				})
			},
			gocationList(type, pid, index) {
				console.log(index)
				this.current = index
				Incation(type, pid).then((res) => {
					this.IncationsecondList = res.data
					console.log(res)
				})
			},
			//选择分类
			secondprelist(index) {
				//判断index是否出现在数组中，没有就添加，有就取消
				if (this.itemlist.indexOf(index) == -1) {
					// console.log(index); //打印下标
					this.itemlist.push(index); //选中添加到数组里
				} else {
					this.itemlist.splice(this.itemlist.indexOf(index), 1); //取消
				}
				this.checkList = []
				this.itemlist.forEach(el => {
					this.checkList.push(this.IncationsecondList[el].id)
				})
			},
			quiet() {
				this.$emit('tabselect', this.checkList,this.itemlist)
			},
			//重置
			reset() {
				this.itemlist = []
				this.checkList = []
			},
		}
	}
</script>

<style lang="scss" scoped>
	.model {
		width: 100%;
		height: auto;
		color: #333;
		font-size: 28rpx;
		position: absolute;
		top: 192rpx;

		.time_center {
			width: 100%;
			height: auto;
			background-color: #fff;
			font-size: 14px;
		}

		.right_box {
			padding: 0 30rpx;

			.right_list {
				width: 100%;
				line-height: 100rpx;
				font-size: 28rpx;
			}

			.time_font {
				font-weight: 700;
			}

			.right_chexs {
				image {
					width: 26rpx;
					height: 18rpx;
				}
			}
		}

		.model_left_box {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			background-color: #fff;

			.model_left {
				width: 200rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: #ddd;
				font-size: 28rpx;

				.left_list {
					position: relative;
				}

				.model_border {
					background-color: #fff;

					.left_color {
						width: 4rpx;
						height: 20rpx;
						background-color: #ffdd47;
						position: absolute;
						left: 0;
					}
				}
			}

			.model_right {
				width: 550rpx;
				height: 500rpx;
				background-color: #fff;
				overflow-y: auto;

				.right_box {
					padding: 0 30rpx;

					.right_list {
						width: 100%;
						line-height: 100rpx;
						font-size: 28rpx;
					}

					.right_chexs {
						image {
							width: 26rpx;
							height: 18rpx;
						}
					}
				}
			}


		}

		.bottom_bs {
			width: 50%;
			height: 88rpx;
			background-color: #fff;
			font-size: 30rpx;
		}

		.bottom_ps {
			width: 50%;
			height: 88rpx;
			background-color: #ffdd47;
			font-size: 30rpx;

		}

	}
</style>
